<!--
 * @Description: 新建、编辑静态路由
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-05 11:01:39
 * @LastEditTime: 2021-11-11 16:30:18
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px" label-position="right">
      <!-- 路由模式 -->
      <el-form-item label="路由模式" prop="model">
        <el-select v-model="form.model" style="width:100%;" :disabled="form.id ? true : false">
          <el-option value="NORMAL" label="普通"></el-option>
          <el-option value="VRF" label="VRF"></el-option>
        </el-select>
      </el-form-item>
      <!--类型 -->
      <el-form-item label="类型" prop="nexthopType">
        <el-select v-model="form.nexthopType" style="width:100%;">
          <el-option value="IPV4" label="IPv4"></el-option>
          <el-option value="IPV6" label="IPv6"></el-option>
        </el-select>
      </el-form-item>
      <!-- 目的 IP/Mask -->
      <el-form-item label="目标网段" class="ip-mask">
        <el-input v-model="form.destIp" placeholder="IP地址" />
        <label>/</label>
        <el-input v-model.number="form.destMask" placeholder="掩码" />
      </el-form-item>
      <!-- Vrf -->
      <el-form-item
        label="VRF名称"
        prop="vrf"
        v-if="form.model === 'VRF'"
        :rules="{required: form.model === 'VRF'? true: false, message: '请检查必填项！', trigger: 'change'}"
      >
        <el-select v-model="form.vrf" style="width:100%;">
          <el-option
            v-for="(item, index) in vrfList"
            :key="index"
            :value="item.instanceName"
            :label="item.instanceName"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 下一跳地址 -->
      <el-form-item
        label="下一跳地址"
        prop="nexthopIp"
        :rules="{required: true,message: '请输入下一跳地址',trigger: 'blur'}"
      >
        <el-input v-model="form.nexthopIp" placeholder="IP地址" />
      </el-form-item>
      <!-- 下一跳的公网IP -->
      <el-form-item label="下一跳公网IP" prop="nextGlobal" v-if="form.model === 'VRF'">
        <el-switch v-model="form.nextGlobal"></el-switch>
      </el-form-item>
      <!-- Metric -->
      <el-form-item label="Metric" prop="metric">
        <el-input v-model.number="form.metric" placeholder="范围：0-255" />
      </el-form-item>
      <!-- 描述 -->
      <el-form-item label="描述" prop="descrip">
        <el-input type="textarea" :rows="3" v-model="form.descrip" maxlength="200" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'data', 'vrfList'],
  data () {
    return {
      dialogTitle: '',
      form: {
        destIp: null,
        destMask: '24',
        nexthopType: 'IPv4',
        nexthopIp: null,
        metric: null,
        descrip: null,
        model: 'NORMAL',
        vrf: null,
        nextGlobal: false
      },
      rules: {
        nexthopIp: [{
          required: true,
          message: '请输入下一跳地址',
          trigger: 'blur'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建静态路由';
          _this.form = {
            destIp: null,
            destMask: '24',
            nexthopType: 'IPv4',
            nexthopIp: null,
            metric: null,
            descrip: null,
            model: 'NORMAL',
            vrf: null,
            nextGlobal: false
          };
        } else {
          _this.dialogTitle = '编辑静态路由';
          let form = {
            id: _this.data.id,
            destIp: _this.data.destIp.substring(0, _this.data.destIp.indexOf('/')),
            destMask: _this.data.destIp.substring(_this.data.destIp.indexOf('/') + 1, _this.data.destIp.length),
            nexthopType: 'IPv4',
            nexthopIp: _this.data.nexthopIp,
            metric: _this.data.metric,
            descrip: _this.data.descrip,
            vrf: _this.data.vrf,
            model: _this.data.extAttrs.routeMode,
            nextGlobal: _this.data.routeAttrs.global
          };
          _this.form = form;
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
      _this.$refs['ruleForm'].resetFields();
    },
    // 过滤IP:Port/Mask
    // eslint-disable-next-line complexity
    ipAddress () {
      let _this = this;
      let ipv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/;
      let arry = [];
      if (_this.form.destIp === '' || _this.form.destIp === null) {
        arry.push('目的IP不能为空！');
      } else {
        if (_this.form.destIp.replace(ipv4) !== 'undefined') {
          arry.push('目的IP格式不正确！');
        }
      }
      if (_this.form.destMask === '' || _this.form.destMask === null) {
        arry.push('目的掩码不能为空！');
      }
      if (_this.form.destMask > 32 || _this.form.destMask < 0) {
        arry.push('目的掩码范围：0-32');
      }
      if (_this.form.metric) {
        if (_this.form.metric > 255 || _this.form.metric < 0) {
          arry.push('Metric值, 范围：0-255');
        }
      }
      return arry;
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let result = _this.ipAddress();
          if (result.length === 0) {
            let params = {
              neId: _this.ne.id,
              siteId: _this.ne.extAttrs.siteId,
              destIp: _this.form.destIp + '/' + _this.form.destMask,
              nexthopType: 'IPV4',
              nexthopIp: _this.form.nexthopIp,
              metric: _this.form.metric,
              descrip: _this.form.descrip,
              vrf: _this.form.model === 'NORMAL' ? null : _this.form.vrf,
              routeAttrs: {
                global: _this.form.nextGlobal ? true : false
              },
              extAttrs: {
                routeMode: _this.form.model
              }
            };
            if (_this.type === 'create') {
              _this.$http.post({
                url: '/api/sdwan/staticroute/create',
                data: params
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.$message.success('创建成功！');
                  _this.$parent.reset();
                  _this.cancel();
                }
              });
            } else {
              params.id = _this.form.id;
              params.siteId = _this.ne.extAttrs.siteId;
              // 请求更新
              _this.$http.post({
                url: '/api/sdwan/staticroute/update',
                data: params
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.$message.success('更新成功！');
                  _this.$parent.reset();
                  _this.cancel();
                }
              });
            }
          } else {
            _this.$message.error(result[0]);
          }
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 75%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
.ip-port-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 50%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input {
    width: 20%;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
</style>